<script>

export default {
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    }
  },
  data() {
    return {
      pointDataInfoByMeter: {
        dialogVisible: false,
        list: []
      },
      filterText: '',
      meterTableData: [],
      pointTableData: [],
      treeData: [],
      treeSelectedNode: null,
      defaultProps: {
        children: 'children',
        label: 'label'
      },
      lineChart: {
        obj: {},
        title: '',
        dateType: '日',
        option: {
          grid: {
            left: '4.5%',
            right: '2%',
            bottom: '5.5%',
            containLabel: true
          },
          title: {
            left: '5%',
            top: '10%'
          },
          backgroundColor: '',
          tooltip: {
            trigger: 'axis',
            formatter: function (c) {
              return '时间：' + c[0].name + '<br>能耗：' + c[0].value + ' kgce';
            }
          },
          xAxis: {
            axisLine: {
              lineStyle: {
                width: 1
              }
            },
            type: 'category',
            data: [
              '0', '1', '2', '3', '4', '5', '6','7', '8', '9',
              '10', '11', '12', '13', '14', '15', '16','17', '18', '19',
              '20', '21', '22', '23', '23'
            ],
            axisLabel: {
              fontSize: 13
            }
          },
          yAxis: {
            axisLine: {
              lineStyle: {
                width: 1,
                show: true
              }
            },
            type: 'value',
            splitLine: { show: false},
            axisLabel: {
              fontSize: 13
            }
          },
          series: [
            {
              type: 'line',
              data: []
            }
          ]
        }
      }
    };
  },
  mounted() {
    this.fetchTree(this.fetchData)
  },
  methods: {
    initChart: function (subjectName, subjectType, subjectId) {
      this.pointDataInfoByMeter.dialogVisible = false
      this.lineChart.obj = {
        subjectName: subjectName,
        subjectType: subjectType,
        subjectId: subjectId
      }
      const timeInfo = this.$getTimeInfo(new Date());
      let fromDate, toDateType;
      if (this.lineChart.dateType === '日') {
        fromDate = timeInfo.year + '-' + timeInfo.month + '-' + timeInfo.day + ' 00:00:00';
        toDateType = 'hour';
      }else if (this.lineChart.dateType === '月') {
        fromDate = timeInfo.year + '-' + timeInfo.month + '-01' + ' 00:00:00';
        toDateType = 'day';
      }else {
        fromDate = timeInfo.year + '-01-01' + ' 00:00:00';
        toDateType = 'day';
      }
      const data = {
        content: {
          fromDate: fromDate,
          subjectType: subjectType,
          subjectId: subjectId,
          toDateType: toDateType
        }
      }
      this.$axios({url:'/ems/client/index/energy/time/trend', data: data}).then((content) => {
        const list = content.list
        this.lineChart.option.xAxis.data = [];
        this.lineChart.option.series[0].data = [];
        for (let i = 0; i < list.length; i ++) {
          const item = list[i]
          this.lineChart.option.xAxis.data.push(item.time);
          this.lineChart.option.series[0].data.push(item.increaseStandValue);
        }
        this.$nextTick(() => {
          this.chart = this.$echarts.init(this.$refs.subjectEnergyTrendChart)
          this.chart.setOption(this.lineChart.option)
        })
      })
    },
    getPointByMeterClick: function (item) {
      this.pointDataInfoByMeter.list = []
      const data = {content:{meterId: item.meterId}}
      this.$axios({url:"/ems/client/energy/search/online/value", data: data}).then((content) => {
        this.pointDataInfoByMeter.list = content.list
        this.pointDataInfoByMeter.dialogVisible = true
      })
      return true;
    },
    treeClick: function (item) {
      this.treeSelectedNode = item
      this.fetchTableData()
      this.getMeterFromTree([item])
      console.log(JSON.stringify(item))
      this.initChart(item.nodeName, 'DIAGRAM', item.nodeId)
    },
    fetchData: function () {
      this.fetchTableData()
    },
    fetchTree: function (afterFuc) {
      const data = {content: {excludeTypes: ['GATEWAY', 'BUILDING', 'DEPARTMENT']}}
      this.$axios({url:"/ems/client/energy/search/circuit/diagram/tree", data: data}).then((content) => {
        this.transformData(content.list)
        this.treeData = content.list
        if (this.treeData.length > 0) {
          this.treeSelectedNode = this.treeData[0]
          if (afterFuc) {
            afterFuc()
          }
          this.getMeterFromTree(this.treeData)
        }
      })
    },
    fetchTableData: function () {
      const data = {content:{}}
      if (this.treeSelectedNode) {
        const idSplit = this.treeSelectedNode.id.split('_');
        data.content['' + idSplit[0] +''] = idSplit[1]
      }
      this.$axios({url:"/ems/client/energy/search/online/value", data: data}).then((content) => {
        this.pointTableData = content.list
      })
    },
    transformData: function (list) {
      for (let i = 0; i < list.length; i ++) {
        const child = list[i];
        child.id = 'nodeId_' + child.nodeId;
        child.label = "【配电路节点】" + child.nodeName;
        if (child.children && child.children.length > 0) {
          this.transformData(child.children)
        }
      }
    },
    getMeterFromTree: function (nodes) {
      const keys = []
      const loop = function (node) {
        if (node.meters && node.meters.length > 0) {
          node.meters.forEach(function (m) {
            if (!keys.includes(m.meterId)) {
              keys.push(m.meterId)
            }
          })
        }
        if (node.children && node.children.length > 0) {
          node.children.forEach(function (c) {
            loop(c)
          })
        }
      }
      nodes.forEach(function (n) {
        loop(n)
      })
      const data = {
        "content": {
          meterIds:keys
        }
      }
      this.$axios({url:"/ems/client/energy/base/meters/health", data: data}).then((content) => {
        this.meterTableData = content.list
      })
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    dateTypeChange: function (){
      this.initChart(this.lineChart.obj.subjectName, this.lineChart.obj.subjectType, this.lineChart.obj.subjectId)
    }
  }
};
</script>

<template>
  <div>
    <el-row>
      <el-col :span="6">
        <el-input
            placeholder="输入关键字进行过滤"
            v-model="filterText">
        </el-input>

        <el-tree
            class="filter-tree"
            :data="treeData"
            :props="defaultProps"
            default-expand-all
            :filter-node-method="filterNode"
            @node-click="treeClick"
            ref="tree">
        </el-tree>
      </el-col>
      <el-col :span="18">
        <el-row>

        </el-row>
        <el-row>
          <el-tabs type="border-card">
            <el-tab-pane label="当前配电柜下电表数据">
              <el-table
                  stripe
                  border
                  :data="meterTableData"
                  style="width: 99%;margin-left: 1%;">
                <el-table-column  prop="meterCode"  label="仪表编号"></el-table-column>
                <el-table-column  prop="meterName"  label="仪表名称"></el-table-column>
                <el-table-column  prop="energyName"  label="能耗类型"></el-table-column>
                <el-table-column  prop="pointNum"  label="采集点数量"></el-table-column>
                <el-table-column  prop="lastUploadDate"  label="上次采集时间"></el-table-column>
                <el-table-column  prop="stateDesc"  label="状态">
                  <template slot-scope="scope"><i style="font-style: normal" :style="scope.row.health ? '': 'color:red;'">{{ scope.row.stateDesc }}</i></template>
                </el-table-column>
                <el-table-column
                    fixed="right"
                    label="操作"
                    width="200"
                    align="center">
                  <template slot-scope="scope">
                    <el-button @click="getPointByMeterClick(scope.row)" type="text" size="small">查看采集点</el-button>
                    <el-button @click="initChart(scope.row.meterName, 'METER', scope.row.meterId)" type="text" size="small">电表趋势</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-tab-pane>
            <el-tab-pane label="当前配电柜下采集点数据">
              <el-table
                  stripe
                  border
                  :data="pointTableData"
                  style="width: 99%;margin-left: 1%;">
                <el-table-column  prop="meterCode"  label="仪表编号"></el-table-column>
                <el-table-column  prop="meterName"  label="仪表名称"></el-table-column>
                <el-table-column  prop="pointName"  label="采集点名称"></el-table-column>
                <el-table-column  prop="energyName"  label="能耗类型"></el-table-column>
                <el-table-column  prop="itemName"  label="分项名称"></el-table-column>
                <el-table-column  prop="gateWayName"  label="采集器名称"></el-table-column>
                <el-table-column  prop="lastUploadRealValue"  label="监测值"></el-table-column>
                <el-table-column  prop="lastUploadTime"  label="上次采集时间"></el-table-column>
                <el-table-column  prop="stateDesc"  label="状态">
                  <template slot-scope="scope"><i style="font-style: normal" :style="scope.row.state === 'Y' ? '': 'color:red;'">{{ scope.row.stateDesc }}</i></template>
                </el-table-column>
                <el-table-column
                    fixed="right"
                    label="操作"
                    width="200"
                    align="center">
                  <template slot-scope="scope">
                    <el-button @click="initChart(scope.row.pointName, 'POINT', scope.row.pointId)" type="text" size="small">采集点趋势</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </el-tab-pane>
          </el-tabs>
        </el-row>
        <el-row style="margin-top: 20px;" v-if="lineChart.obj.subjectName">
          <el-tabs type="border-card">
            <el-tab-pane :label="'【' + lineChart.obj.subjectName + '】走势图'">
              <el-radio-group v-model="lineChart.dateType" @input="dateTypeChange">
                <el-radio-button label="日"></el-radio-button>
                <el-radio-button label="月"></el-radio-button>
                <el-radio-button label="年"></el-radio-button>
              </el-radio-group>
              <div ref="subjectEnergyTrendChart" style="height: 400px;">

              </div>
            </el-tab-pane>
          </el-tabs>
        </el-row>
      </el-col>
    </el-row>
    <el-dialog
        :visible.sync="pointDataInfoByMeter.dialogVisible"
        width="70%">
      <el-table
          stripe
          border
          :data="pointDataInfoByMeter.list"
          style="width: 98%;margin-left: 1%;">
        <el-table-column  prop="meterCode"  label="仪表编号"></el-table-column>
        <el-table-column  prop="meterName"  label="仪表名称"></el-table-column>
        <el-table-column  prop="pointName"  label="采集点名称"></el-table-column>
        <el-table-column  prop="energyName"  label="能耗类型"></el-table-column>
        <el-table-column  prop="itemName"  label="分项名称"></el-table-column>
        <el-table-column  prop="gateWayName"  label="采集器名称"></el-table-column>
        <el-table-column  prop="lastUploadRealValue"  label="监测值"></el-table-column>
        <el-table-column  prop="lastUploadTime"  label="上次采集时间"></el-table-column>
        <el-table-column  prop="stateDesc"  label="状态">
          <template slot-scope="scope"><i style="font-style: normal" :style="scope.row.state === 'Y' ? '': 'color:red;'">{{ scope.row.stateDesc }}</i></template>
        </el-table-column>
        <el-table-column
            fixed="right"
            label="操作"
            width="200"
            align="center">
          <template slot-scope="scope">
            <el-button @click="initChart(scope.row.pointName, 'POINT', scope.row.pointId)" type="text" size="small">采集点趋势</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<style>

</style>
